<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <title>首页-多级导航条</title>
    <style>
        html, body, ul, li, ol, a {
            margin: 0;
            padding: 0;
        }

        html {
            width: 100%;
            height: 100%;
            {#background-color: #00F7DE;#}
        }

        body {
            width: 100%;
            height: 100%;
        }

        a {
            height: auto;
            width: auto;
            display: inline-block;
            text-decoration: none;
            color: #000000;
        }
        /* 顶部显示多级导航*/
        .top{
            width: 100%;
            height: 60px;
            font-size: 30px;
            line-height: 60px;
            color: red;
            font-weight: bold;
        }


/* 多级导航条*/
        .nav {
            width: 800px;
            height: 40px;
            color: black;
            margin: auto;
            /*border: 1px solid black;*/
        }

        .chice {
            width: 200px;
            height: 100%;
            display: inline-block;
            float: left;
            text-align: center;
            line-height: 40px;
        }

        .chice:hover {
            background-color: #eeeeee;
            border-bottom: 2px solid red;
        }
        .chice:hover >span > a{
             color: #1E9FFF;
        }

        div.two {
            display: none;
        }

        div.two li {
            position: relative;
        }

        div.two li:hover {
            background-color: #eeeeee;
        }

        div.two li:hover >span >a{
            color: #5FB878;
        }

        .chice li {
            list-style-type: None;
        }

        .chice ul, .chice  div {
            width: 100%;
        }
        div.three {
            display: none;
            position: absolute;
            left: 200px;
            top: 0;
        }
        div.two li:hover div.three {
            display: block;
        }

        div.three li:hover {
            background-color: #eeeeee;
        }

        div.three li:hover >span >a{
            color: #FF5722;
        }

    </style>
    <!--Elment-ui样式-->
{#    <!-- 引入样式 -->#}
{#    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">#}
{#    <!-- 引入组件库 -->#}
{#    <script src="https://unpkg.com/element-ui/lib/index.js"></script>#}
    <script type="application/javascript" src='{% static "js/jquery.js" %}'></script>
    <style href='{% static "layui/css/layui.css" %}'></style>
    <script type="application/javascript" src='{% static "layui/layui.js" %}'></script>
</head>
<body>
<div class="top">
    多级导航条
</div>
<div class="nav">
            <!--一级导航条-->
    {% for item in nav %}
        <div class="chice">
            <span><a target="_blank" href="">{{ item.chice }}</a></span>
            <!--二级导航条-->
            <div class="two">
                <ul>
                    {% for j in item.select1 %}
                        <li>
                                <span>
                                    <a target="_blank" href="">{{ j.chice }}</a>
                                </span>
                            <!--三级导航条-->
                            <div class="three">
                                <ul>
                                    {% for q in j.select2 %}
                                        <li><span><a href="">{{ q.name }}</a></span></li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    {% endfor %}
</div>

</body>
<script>
    $(document).ready(function () {
        $(".chice").mouseenter(function () {
            $(this.children[1]).slideDown(50)
        })
        $(".chice").mouseleave(function () {
            $(this.children[1]).slideUp(50)
        })
    })
</script>
</html>